<template>
  <div class="flex-container">
    <div :class="[!isZoom ? 'left' : 'left left1']">
      <div class="list">
        <Tree ref="refTree" @toggleOrgId="toggleOrgId" :dataList="dataList"></Tree>
      </div>
      <!-- <div class="zoom" @click="zoomClick">点击缩放</div> -->
    </div>
    <div :class="[!isZoom ? 'right' : 'right right1']">
      <div class="header">
        <div class="header_left">
          <div class="org_name">{{ orgName }}</div>

          <div class="total"><i class="iconfont icon_unit"></i>{{ total }}</div>
        </div>
        <div class="header_right" style="display: flex; align-items: center">

          <el-input v-model.trim="searchVal" placeholder="请输入联网单位"
            size="small" clearable @clear="searchClick" style="width: 220px;margin-right: 15px" maxlength="15">
            <el-button slot="append" :icon="loadingSearch ? 'el-icon-loading' : 'el-icon-search'" @click="searchClick">
            </el-button>
          </el-input>

          <el-button class="el_button" size="small" icon="el-icon-plus" style="margin-left: 15px" @click="onAdd">
            新增
          </el-button>
          <!-- <el-button
             class="el_button"
             size="small"
             icon="el-icon-plus"
             style="margin-left: 15px"
             @click="addClick"
             v-permission="{ action: 'enMember:member' }"
             v-if="role == 1 || user.roleName == 'TENANT_ADMIN'"
           >
             关联成员
           </el-button>
           <el-button
             class="el_button"
             size="small"
             icon="el-icon-right"
             style="margin-left: 15px"
             @click="exit"
             v-if="role != 1 && user.roleName == 'ORG_ADMIN' && isQuitOrg"
           >
             退出机构
           </el-button> -->
        </div>
      </div>
      <div class="content">
        <el-table :data="dataList" height="calc(100% - 0px)" class="table" :header-cell-style="headerStyle">
          <el-table-column align="center" label="序号" type="index" width="80" height="30"></el-table-column>
          <el-table-column align="center" prop="orgName" label="联网单位" min-width="140" show-overflow-tooltip>
          </el-table-column>
          <!-- <el-table-column
             align="center"
             prop="username"
             label="行政区划"
             min-width="140"
             show-overflow-tooltip
           >
           </el-table-column> -->
          <!-- <el-table-column
             align="center"
             label="单位类型"
             min-width="140"
             show-overflow-tooltip
           >
             <template slot-scope="scope">
               {{ scope.row.role.description || "" }}
             </template>
</el-table-column> -->
          <el-table-column align="center" prop="nature" label="监管类型" min-width="150" show-overflow-tooltip>
            <template slot-scope="scope">
              {{ scope.row.flatType | flatTypeText }}
            </template>
          </el-table-column>
          <el-table-column align="center" prop="nature" label="单位性质" min-width="150" show-overflow-tooltip>
            <template slot-scope="scope">
              {{ scope.row.nature | natureText }}
            </template>
          </el-table-column>
          <el-table-column align="center" prop="category" label="单位类别" min-width="150" show-overflow-tooltip>
            <template slot-scope="scope">
              {{ scope.row.category | categoryText }}
            </template>
          </el-table-column>
          <el-table-column align="center" prop="category" label="监管等级" min-width="150" show-overflow-tooltip>
            <template slot-scope="scope">
              {{ scope.row.grade | gradeText }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="操作" width="180">
            <template slot-scope="scope">
              <!-- v-if="(flag && user.userId!=scope.row.userId)|| user.roleName=='TENANT_ADMIN'" -->
              <el-tooltip class="item" effect="dark" content="编辑" placement="bottom">
                <i @click="onEdit(scope.row)" class="iconfont tianxie tableBtnIcon"></i>
              </el-tooltip>
              <el-tooltip class="item" effect="dark" content="删除" placement="bottom">
                <i @click="onDel(scope.row.id)" class="iconfont shanchu tableBtnIcon"></i>
              </el-tooltip>
            </template>
          </el-table-column>
        </el-table>
        <!-- <pagination :page.sync="page" :limit.sync="limit" :total="total" @pagination="getDataList" class="pagination">
        </pagination> -->
      </div>
    </div>
    <Add ref="refAdd" :getLocationInfo="getLocationInfo" :getAddressflag="getAddressflag" :fixedPjtInfo="fixedPjtInfo">
    </Add>
    <edit ref="refEdit" :getLocationInfo="getLocationInfo" :getAddressflag="getAddressflag" :editOrgInfo="editOrgInfo">
    </edit>
  </div>
</template>

<script>
import {
  reqOrgList,
  reqOrgUserDel,
  reqTurnOver,
  reqOrgExit,
  reqAssignRoleList,
  reqOrgDel,
} from "@api/api.js";
import { mapState } from "vuex";
import Tree from "@/components/tree/orgUnit";
import tableStyleMixin from "@mixin/table-style";
import Pagination from "@components/Pagination.vue";
import Add from "./components/add.vue"; //新增组件
//  import ResetPassword from "./components/ResetPassword.vue"; //重置密码组件
import edit from "./components/edit.vue";
import organization from "@views/login/components/organization";
import mixinGetAddress from "./components/mixins/getAddress.js";

export default {
  name: "",
  components: {
    Tree,
    Pagination,
    Add,
    edit
  },
  mixins: [tableStyleMixin, mixinGetAddress],
  data() {
    return {
      searchVal: "",
      searchSel: "1", //用户名/手机号
      dataList: [],
      page: 1,
      limit: 10,
      total: 0,
      loadingSearch: false,
      isZoom: false,
      orgId: "",
      orgName: "",
      flag: false,
      role: "",
      width: "",
      editInfo: {},
      roleList: [], //角色列表
      submitUserInfo: {}, //提交的信息（重置密码用(mobile+id)）
      editOrgInfo: {},

      isQuitOrg: true,
      fixedPjtInfo: {},
    };
  },
  mounted() {
    this.$refs.refTree.getDataList()
  },
  watch: {},
  computed: {
    ...mapState(["user"]),
  },
  methods: {
    onAdd() {
      this.$refs.refAdd.dialogVisible = true;
      this.$refs.refAdd.RegionList();
    },
    // 删除单位
    exit(data) {
      this.$confirm("此操作将退出该机构 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          const res = await reqOrgExit({
            orgId: this.orgId,
            userId: this.user.userId,
          });
          if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
          this.$modal.notifySuccess("退出机构成功,请再次选择机构登录");
          // this.$refs.refTree.getDataList();
          this.$refs.reforganization.dialogVisible = true;
        })
        .catch(() => { });
    },
    // 设置单位管理员
    edit(row) {
      this.editInfo = JSON.parse(JSON.stringify(row));
      this.$refs.refeditturnOver.dialogVisible = true;
      // this.$confirm("此操作将设置该用户为单位管理员, 是否继续?", "提示", {
      //   confirmButtonText: "确定",
      //   cancelButtonText: "取消",
      //   type: "warning",
      // })
      //   .then(async () => {
      //     const res = await reqTurnOver({
      //       orgId: this.orgId,
      //       userId: row.userId,
      //       role:1
      //     });
      //     if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
      //     this.$modal.notifySuccess("设置成功！");
      //     if(this.user.roleName=='ORG_ADMIN'){
      //       this.role ='2' // 如果是单位管理员，把单位设置给其他成员
      //       // 单位列表管理员图标隐藏
      //       this.$refs.refTree.flagtree=false;
      //     }
      //      this.getInitDataList()
      //   })
      //   .catch(() => {});
    },
    //   点击缩放左侧
    zoomClick() {
      this.isZoom = !this.isZoom;
    },
    // 切换单位
    toggleOrgId(data) {
      if (data.orgId == "") {
        this.dataList = [];
        this.total = 0;
        return;
      }
      this.fixedPjtInfo = data;//机构信息
      this.orgId = data.orgId;
      this.orgName = data.orgName;
      this.role = data.role; //role==1为管理员
      this.isQuitOrg = data.isQuitOrg;
      this.getDataList();
    },
    async getDataList() {
      const res = await reqOrgList( {
        userId: this.user.userId,
        roleName: this.user.roleName,
        tenantId: this.user.tenantId,
        orgName: this.searchVal,
        parentId: this.orgId,
        type: "4"
      });
      if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
      this.dataList = res.data.rows;
      this.total = res.data.total;
    },
    getInitDataList() {
      this.page = 1;
      this.limit = 10;
      this.getDataList();
    },
    editState() {
      this.role = "2"; // 如果是普通管理员，把单位设置给其他成员
      // 单位列表管理员图标隐藏
      this.$refs.refTree.flagtree = false;
    },
    // 查询
    async searchClick() {
      this.page = 1;
      this.limit = 10;
      this.loadingSearch = true;
      await this.getDataList();
      this.loadingSearch = false;
    },
    // 点击关联成员
    addClick() {
      this.$refs.refMemberAdd.dialogVisible = true;
    },
    delClick(id) {
      this.$confirm("此操作将移除该成员, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          let res = await reqOrgUserDel({ idList: [id] });
          if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
          this.$modal.notifySuccess("移除成功");
          this.getInitDataList();
        })
        .catch(() => { });
    },
    onEdit(item) {
      this.editOrgInfo = JSON.parse(JSON.stringify(item));
      this.$refs.refEdit.dialogVisible = true;
      this.$refs.refEdit.RegionList();
      this.$refs.refEdit.cityArr();
      this.$refs.refEdit.areaArr();
      this.$refs.refEdit.RegionLevelList();
      this.$refs.refEdit.communitylList();
    },
    async onDel(id) {
      const result = await this.$confirm(
        "此操作将永久删除该单位, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).catch(() => { });
      if (result !== "confirm") return;
      let res = await reqOrgDel(id);
      if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
      this.$modal.notifySuccess("删除单位成功");
      this.getDataList();
    },
  },
};
</script>

<style scoped lang="less">
@import url("./unit.less");
@import url("~@views/style/tablePage.less");

// 查询条件切换
::v-deep .el-select .el-input {
  width: 100px;
}

// 搜索框
::v-deep .el_input .el-input__inner {
  border-left: none !important;
  border-radius: 0px !important;
}

::v-deep .el_Select .el-input__inner {
  border-radius: 0px !important;
}
</style>